<template>
	<view class="page-order-det" :style="$theme.pageStyle">
		<view class="top"> </view>
		<view class="body">
			<view class="body_title">
				<view class="tit">使用权益</view>
				<view class="avat">
					<view class="ava">
						<u-avatar-group :urls="urls" size="25" gap="0.4"></u-avatar-group>
					</view>
					<view class="ava_tit">
						当前有<span>{{randomNumber}}</span>位律师在线
					</view>
				</view>
			</view>
			<view class="body_box">
				<u--form labelPosition="left" :model="Form" ref="form1">
					<u-form-item labelWidth="70" label="使用权益" prop="Form.type"
						ref="item1" @click="ToShowType()">
						<view @click="ToShowType()">
							<u--input v-model="Form.type" disabled disabledColor="#ffffff" placeholder="请选择使用的权益"
								border="none"></u--input>
						</view>
						<template #right>
							<u-icon name="arrow-right"></u-icon>
						</template>
					</u-form-item>
				</u--form>
				<view style="font-size: 14px;color: #666;margin-top: 5px;" v-if="select">
					已选择{{ Form.type }}，<span v-if="number != 0">剩余{{ number }}次</span> 
				</view>
				<view class="" style="height: 20px;"></view>
				<u--form labelPosition="top" :model="Form"  ref="form1">
					<u-form-item labelWidth="120" label="基本情况" prop="Form.content" ref="item1">
						<u--textarea v-model="Form.content"
							placeholder="请简单描述遇到的问题"
							height="140"></u--textarea>
					</u-form-item>
				</u--form>

				<view class="tips" style="font-size: 12px;color: #666;text-align: center;">
					精选律师，全程指导，累计解决案例15万+，累计金额286亿 +
				</view>

				<u-picker :show="showType" :columns="Typeactions" keyName="name" @close="Typecancel" @select="TypeSelect"
					@cancel="Typecancel" @confirm="TypeSelect"></u-picker>

			</view>

			<view class="btn">
				<view class="btn_s" @click="Send()">
					确定使用权益
				</view>
			</view>

		</view>




	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				id: '',
				randomNumber: this.round(),
				mail: '',
				Order: {},
				Goods: {},
				timeData: {},
				description: 'AI 维权律师每天为大家生成 200+ 封起诉书，希望大家能支持这个项目，让更多人可以长期受益。谢谢！',
				pass: '',
				demand: '',
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
				],
				showType: false,
				showAddress: false,
				select: false,
				Form: {
					id: '',
					type: '',
					content: '',
				},
				Typeactions: [
				],
				radio: '',
				switchVal: false,
				province: "广东省",
				city: "广州市",
				area: "天河区",
				areaCode: "440106",
				number: "",
			};
		},
		onLoad(opt) {
			// this.id = opt.id;
			this.getData();
		},
		methods: {
			round() {
				return String(Math.floor(Math.random() * 1000)).padStart(3, '0');
			},
			async getData() {
				try {
					const res = await $H.post('user/equity', {
						
					}, {
						token: true
					});
					this.Typeactions = res.data
				} catch (error) {
					console.error('Error fetching IndexData:', error);
				} finally {
				}
			},
			ToShowType() {
				this.showType = true
			},
			CshowType() {
				this.showType = false
			},
			TypeSelect(e) {
				this.Form.type = e.value[0].name
				this.Form.id = e.value[0].id
				this.number = e.value[0].number
				this.showType = false
				this.select = true
			},
			Typecancel() {
				this.showType = false
			},
			ToShowAddressType() {
				this.showAddress = true
			},
			openPicker() {
				this.showAddress = true
			},
			onhideShow() {
				this.showAddress = false
			},
			switchChange(e) {

			},
			Otherchange(e) {
				if (e === true) {
					this.Form.submit.switch = 1
				} else {
					this.Form.submit.switch = 0
				}
			},
			onChange(e) {
				this.timeData = e;
			},
			Popdispaly() {
				this.Popshow = true
			},
			Popclose() {
				this.Popshow = false
			},
			Popopen() {},
			clear() {
				this.pass = ''
				this.demand = ''
			},
			AddressChange(address) {
				this.addressInfo = address
			},
			async Send() {

				if (this.Form.type === '') {
					return uni.showToast({
						icon: "none",
						title: '请选择使用权益'
					})
				}

				try {
					const res = await $H.post('user/useequity', {
						data: this.Form
					}, {
						token: true
					});
					
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				
				} catch (error) {
					// 处理错误
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f7f7;
	}

	.page-order-det {
		position: relative;

		.top {
			width: 100%;
			height: 548rpx;
			margin-top: -44px;
			background: linear-gradient(180deg, #e9e7ef 80%, #f0f0f4 100%);
		}

		.body {
			position: absolute;
			top: 100rpx;
			width: 100%;
			padding-bottom: 140rpx;

			.body_title {
				margin: 15px;

				.tit {
					font-size: 24px;
					font-weight: bold;
				}

				.avat {
					display: flex;
					margin-top: 10px;

					.ava {}

					.ava_tit {
						margin-left: 5px;
					}

					.ava_tit span {
						color: #ff9900;
						margin-right: 3px;
						margin-left: 3px;
					}
				}
			}

			.body_box {
				margin: 15px;
				background: #fff;
				border-radius: 15px;
				padding: 10px;
			}


		}
	}

	.btn {
		display: flex;
		justify-content: space-between;
		width: 100%;
		bottom: 0;
		position: fixed;
		padding-bottom: 20px;

		.btn_s {
			height: 50px;
			margin: 10px;
			background: linear-gradient(270deg, var(--color-primary), var(--color-primary-light-3));
			// box-shadow: 1px 12px 19px rgba(254, 53, 49, .37);
			width: 100%;
			border-radius: 8px;
			text-align: center;
			font-size: 16px;
			color: #fff;
			line-height: 50px;
		}
	}
</style>